<style lang="scss">
	.multiline-ellipsis {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.header {
		background-color: #f00;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		position: sticky;
		top: 0;
		z-index: 999;

		input {
			height: 80rpx;
			background-color: white;
			width: 100%;
			border-radius: 40rpx;
			padding-left: 10rpx;
		}
	}

	.list {
		column-count: 2;
		column-gap: 8px;
		padding: 10rpx;

		.list-item {
			-webkit-column-break-inside: avoid;
			break-inside: avoid;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 20rpx 0;

			image {
				width: 100%;
			}

			&:nth-child(1) {
				margin-top: 0;
			}

			.title {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	
	.pull-finish {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<input type="text" placeholder="请输入关键字" />
		</view>
		<!-- 轮播 -->

		<!-- 列表 瀑布流 -->
		<view class="list">
			<view class="list-item" v-for="(item, index) in listData" :key="item.id">
				<image
					:src="item.image"
					mode=""></image>
				<text class="title">{{item.title}}</text>
				<view class="price">
					$: {{item.price}}
				</view>
			</view>
		</view>
		<view class="pull-finish" v-if="isFinish">
			没有更多数据了..
		</view>
	</view>
</template>


<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	// 数据
	const listData = ref([])
	const _page = ref(1)
	const isFinish = ref(false)
	// 方法： 获取数据
	const _getData = () => {
		uni.request({
			url: 'http://localhost:3000/list',
			data: {
				_page: _page.value
			}
		}).then(resp => {
			console.log(resp.data)
			// 拼接数据
			listData.value = listData.value.concat(resp.data)
			// 优化： 当没有更多数据的开关变量的控制
			isFinish.value = resp.data.length === 0
		})
	}

	// 生命周期
	onLoad(() => {
		_getData()
	})
	
	onReachBottom(() => {
		// 是否存在更多数据
		if(isFinish.value) return ;
		
		_page.value++
		_getData()
	})
</script>